<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 px-4">
    <div class="w-full">
      <!-- 分类筛选 -->
      <div class="mb-8 flex justify-center gap-3 mt-8">
        <button
          v-for="category in categories"
          :key="category.id"
          @click="selectCategory(category.id)"
          class="px-4 py-2 rounded-lg"
          :class="
            selectedCategory === category.id
              ? 'bg-blue-500 text-white'
              : 'bg-white dark:bg-gray-800'
          "
        >
          {{ category.name }}
        </button>
      </div>

      <!-- 照片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6" v-viewer>
        <div
          v-for="photo in paginatedPhotos"
          :key="photo.id"
          class="group bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300"
          @click="openPhoto(photo)"
        >
          <div class="relative overflow-hidden">
            <img
              :src="photo.url"
              :alt="photo.title"
              class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
            />
            <!-- 分类标签 -->
            <div class="absolute top-2 left-2">
              <span
                class="px-2 py-1 text-xs font-medium rounded-full text-white bg-blue-500/80 backdrop-blur-sm"
              >
                {{ getCategoryName(photo.categoryId) }}
              </span>
            </div>
          </div>
          <div class="p-4">
            <h3 class="font-semibold mb-2 text-gray-800 dark:text-gray-100">{{ photo.title }}</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ photo.description }}</p>
            <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
              <span class="mr-3">{{ photo.date }}</span>
              <span>{{ photo.location }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页控制 -->
      <div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
        <!-- 分页信息 -->
        <div class="text-sm text-gray-600 dark:text-gray-400">
          第 {{ pagination.currentPage }} 页，共
          {{ Math.ceil(totalPhotos / pagination.pageSize) }} 页
        </div>

        <!-- Element Plus 分页组件 - 只显示页码 -->
        <el-pagination
          v-model:current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="totalPhotos"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          class="custom-pagination"
        />
      </div>

      <!-- 空状态提示 -->
      <div v-if="filteredPhotos.length === 0" class="text-center py-16">
        <div class="w-24 h-24 mx-auto mb-4 text-gray-300 dark:text-gray-600">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path
              d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
            />
          </svg>
        </div>
        <h3 class="text-lg font-medium text-gray-600 dark:text-gray-400 mb-2">
          {{ selectedCategory === 'all' ? '暂无照片' : '该分类暂无照片' }}
        </h3>
        <p class="text-gray-500 dark:text-gray-500">
          {{ selectedCategory === 'all' ? '开始添加您的第一张照片吧！' : '尝试选择其他分类查看' }}
        </p>
      </div>

      <!-- 照片查看器模态框 -->
      <div
        v-if="showPhotoViewer"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm"
        @click="closePhotoViewer"
      >
        <div class="relative max-w-4xl max-h-full overflow-hidden rounded-xl" @click.stop>
          <!-- 关闭按钮 -->
          <button
            @click="closePhotoViewer"
            class="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>

          <!-- 照片内容 -->
          <div class="relative">
            <img
              :src="currentPhoto.url"
              :alt="currentPhoto.caption"
              class="w-full h-auto max-h-96 object-contain"
            />

            <!-- 照片信息 -->
            <div
              class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white"
            >
              <p class="text-sm">{{ currentPhoto.caption }}</p>
            </div>

            <!-- 导航按钮 -->
            <button
              v-if="currentPhotoIndex > 0"
              @click.stop="previousPhoto"
              class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>

            <button
              v-if="currentPhotoIndex < currentPhotos.length - 1"
              @click.stop="nextPhoto"
              class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'nature', name: '自然' },
  { id: 'city', name: '城市' },
  { id: 'food', name: '美食' },
  { id: 'art', name: '艺术' },
  { id: 'game', name: '游戏' }
])

const photos = ref([
  {
    id: '1',
    title: '山间晨雾',
    description: '清晨的山谷被薄雾笼罩，宛如仙境一般美丽',
    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
    categoryId: 'nature',
    date: '2024-01-15',
    location: '黄山'
  },
  {
    id: '2',
    title: '城市夜景',
    description: '繁华都市的夜晚，灯火辉煌，车水马龙',
    url: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=400&h=300&fit=crop',
    categoryId: 'city',
    date: '2024-01-20',
    location: '上海'
  },
  {
    id: '3',
    title: '春日樱花',
    description: '粉色的樱花盛开，春意盎然，美不胜收',
    url: 'https://images.unsplash.com/photo-1522383225653-ed111181a951?w=400&h=300&fit=crop',
    categoryId: 'nature',
    date: '2024-02-01',
    location: '武汉大学'
  },
  {
    id: '4',
    title: '精致甜点',
    description: '手工制作的马卡龙，色彩缤纷，口感细腻',
    url: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?w=400&h=300&fit=crop',
    categoryId: 'food',
    date: '2024-01-25',
    location: '巴黎'
  },
  {
    id: '5',
    title: '海边日落',
    description: '夕阳西下，海天一色，金色的光芒洒满海面',
    url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop',
    categoryId: 'nature',
    date: '2024-01-30',
    location: '三亚'
  },
  {
    id: '6',
    title: '古建筑',
    description: '传统中式建筑，飞檐翘角，雕梁画栋',
    url: 'https://images.unsplash.com/photo-1542810634-71277d95dcbb?w=400&h=300&fit=crop',
    categoryId: 'city',
    date: '2024-02-05',
    location: '苏州'
  },
  {
    id: '7',
    title: '咖啡时光',
    description: '一杯香浓的拿铁，配上精致的拉花，享受慢生活',
    url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop',
    categoryId: 'food',
    date: '2024-01-28',
    location: '星巴克'
  },
  {
    id: '8',
    title: '艺术创作',
    description: '抽象画作，色彩大胆，充满想象力和创造力',
    url: 'https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop',
    categoryId: 'art',
    date: '2024-02-10',
    location: '美术馆'
  },
  {
    id: '9',
    title: '雪山之巅',
    description: '白雪皑皑的山峰，巍峨壮观，令人敬畏',
    url: 'https://images.unsplash.com/photo-1464822759844-d150baec0134?w=400&h=300&fit=crop',
    categoryId: 'nature',
    date: '2024-02-15',
    location: '阿尔卑斯山'
  },
  {
    id: '10',
    title: '现代都市',
    description: '摩天大楼林立，展现现代城市的繁华与活力',
    url: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=400&h=300&fit=crop',
    categoryId: 'city',
    date: '2024-02-20',
    location: '纽约'
  },
  {
    id: '11',
    title: '美食盛宴',
    description: '丰盛的餐桌，色香味俱全，令人垂涎欲滴',
    url: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&h=300&fit=crop',
    categoryId: 'food',
    date: '2024-02-25',
    location: '米其林餐厅'
  },
  {
    id: '12',
    title: '创意设计',
    description: '独特的艺术设计，充满创意和想象力',
    url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
    categoryId: 'art',
    date: '2024-03-01',
    location: '设计工作室'
  },
  {
    id: '13',
    title: '森林小径',
    description: '幽静的森林小径，绿意盎然，清新自然',
    url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop',
    categoryId: 'nature',
    date: '2024-03-05',
    location: '黑森林'
  },
  {
    id: '14',
    title: '历史古迹',
    description: '古老的历史遗迹，承载着深厚的文化底蕴',
    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
    categoryId: 'city',
    date: '2024-03-10',
    location: '罗马'
  },
  {
    id: '15',
    title: '精致料理',
    description: '精心制作的料理，每一道都是艺术品',
    url: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400&h=300&fit=crop',
    categoryId: 'food',
    date: '2024-03-15',
    location: '京都'
  },
  {
    id: '16',
    title: '现代艺术',
    description: '前卫的现代艺术作品，挑战传统审美观念',
    url: 'https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop',
    categoryId: 'art',
    date: '2024-03-20',
    location: '现代艺术博物馆'
  }
])

const selectedCategory = ref('all')

const filteredPhotos = computed(() => {
  if (selectedCategory.value === 'all') return photos.value
  return photos.value.filter(p => p.categoryId === selectedCategory.value)
})

const pagination = ref({
  currentPage: 1,
  pageSize: 8
})

const totalPhotos = computed(() => filteredPhotos.value.length)

const paginatedPhotos = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredPhotos.value.slice(start, end)
})

const selectCategory = (id: string) => {
  selectedCategory.value = id
  pagination.value.currentPage = 1 // Reset to first page when category changes
}

const getCategoryName = (categoryId: string) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未知'
}

const openPhoto = (photo: any) => {
  console.log('打开照片:', photo.title)
  // 这里可以添加照片预览功能
}

const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val
}
</script>

<style scoped>
/* 自定义样式 */
.aspect-square {
  aspect-ratio: 1 / 1;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

/* 图片加载动画 */
img {
  transition: opacity 0.3s ease;
}

img[src] {
  opacity: 1;
}

/* 响应式优化 */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* 分类按钮悬停效果 */
button:hover {
  transform: translateY(-1px);
}

/* 照片卡片悬停效果增强 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* 分类标签样式 */
.bg-blue-500\/80 {
  background-color: rgba(59, 130, 246, 0.8);
}

/* 空状态图标样式 */
svg {
  width: 100%;
  height: 100%;
}

/* Element Plus 分页组件样式 - 只显示页码 */
.custom-pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #6b7280;
  --el-pagination-hover-color: #3b82f6;
  --el-pagination-active-bg-color: #3b82f6;
  --el-pagination-active-text-color: #ffffff;
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background-color: transparent;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  margin: 0 3px;
  border-radius: 8px;
  min-width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  transition: all 0.3s ease;
  font-weight: 500;
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background-color: #f3f4f6;
  color: #3b82f6;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.custom-pagination :deep(.el-pagination .el-pager li.is-active) {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background-color: transparent;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
  margin: 0 3px;
}

.custom-pagination :deep(.el-pagination .btn-prev:hover),
.custom-pagination :deep(.el-pagination .btn-next:hover) {
  background-color: #f3f4f6;
  color: #3b82f6;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* 深色模式样式 */
.dark .custom-pagination :deep(.el-pagination .el-pager li:not(.is-active)) {
  background-color: transparent;
  color: #9ca3af;
  border-color: #4b5563;
}

.dark .custom-pagination :deep(.el-pagination .el-pager li:not(.is-active):hover) {
  background-color: #374151;
  color: #60a5fa;
  border-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}

.dark .custom-pagination :deep(.el-pagination .btn-prev),
.dark .custom-pagination :deep(.el-pagination .btn-next) {
  background-color: transparent;
  color: #9ca3af;
  border-color: #4b5563;
}

.dark .custom-pagination :deep(.el-pagination .btn-prev:hover),
.dark .custom-pagination :deep(.el-pagination .btn-next:hover) {
  background-color: #374151;
  color: #60a5fa;
  border-color: #60a5fa;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
</style>
